<template>
  <div class="my-table">
    <vxe-grid
      ref="my-table"
      v-bind="gridOptions"
      @page-change="eventPageChange"
    >
      <template #form>
        <slot name="search-bar"></slot>
      </template>
      <template #toolbar_buttons>
        <slot name="handle-bar"></slot>
        <template v-if="toolgerConfig.btnTxt !== ''">
          <Button type="text" :icon="toolgerConfig.icon" @click="eventTogger">
            {{ toolgerConfig.btnTxt }}
          </Button>
        </template>
      </template>
      <template #pager_left>
        <div class="page-left">
          <slot name="table-bar"></slot>
        </div>
      </template>
    </vxe-grid>
  </div>
</template>

<script>
import Vue from "vue";
import extend from "extend";
import _ from "lodash";
import XEUtils from "xe-utils";
import {
  // 核心
  VXETable,
  // 功能模块
  Icon,
  Filter,
  Menu,
  Edit,
  Export,
  Keyboard,
  Validator,
  Header,
  Footer,
  // 可选组件
  Column,
  Colgroup,
  Grid,
  Toolbar,
  Pager,
  Checkbox,
  CheckboxGroup,
  Radio,
  RadioGroup,
  RadioButton,
  Input,
  Textarea,
  Button,
  Modal,
  Tooltip,
  Form,
  FormItem,
  FormGather,
  Select,
  Optgroup,
  Option,
  Switch,
  List,
  Pulldown,
  // 表格
  Table,
} from "vxe-table";
 // 表格功能
      Vue.use(Header)
      .use(Footer)
      .use(Icon)
      .use(Filter)
      .use(Edit)
      .use(Menu)
      .use(Export)
      .use(Keyboard)
      .use(Validator)

      // 可选组件
      .use(Column)
      .use(Colgroup)
      .use(Grid)
      .use(Toolbar)
      .use(Pager)
      .use(Checkbox)
      .use(CheckboxGroup)
      .use(Radio)
      .use(RadioGroup)
      .use(RadioButton)
      .use(Input)
      .use(Textarea)
      .use(Button)
      .use(Modal)
      .use(Tooltip)
      .use(Form)
      .use(FormItem)
      .use(FormGather)
      .use(Select)
      .use(Optgroup)
      .use(Option)
      .use(Switch)
      .use(List)
      .use(Pulldown)

      // 安装表格
      .use(Table)
Vue.prototype.$XModal = VXETable.modal
Vue.prototype.$XPrint = VXETable.print
Vue.prototype.$XSaveFile = VXETable.saveFile
Vue.prototype.$XReadFile = VXETable.readFile  
import zhCN from "vxe-table/lib/locale/lang/zh-CN"; 
// 按需加载的方式默认是不带国际化的，自定义国际化需要自行解析占位符 '{0}'，例如：
VXETable.setup({
  // // 对组件内置的提示语进行国际化翻译
  // i18n: (key, args) => i18n.t(key, args)
  size: "mini",
  zIndex: 1012,
  version: 0.1,
  pager: {
    size: "mini",
    autoHidden: true,
    border: true,
    background: true,
  },
  i18n: (key, args) => XEUtils.toFormatString(XEUtils.get(zhCN, key), args),
  // size: null, // 全局尺寸
  // zIndex: 999, // 全局 zIndex 起始值，如果项目的的 z-index 样式值过大时就需要跟随设置更大，避免被遮挡
  // version: 0, // 版本号，对于某些带数据缓存的功能有用到，上升版本号可以用于重置数据
  // table: {
  //   showHeader: true,
  //   keepSource: false,
  //   delayHover: 250,
  //   showOverflow: null,
  //   showHeaderOverflow: null,
  //   showFooterOverflow: null,
  //   size: null,
  //   resizable: false,
  //   autoResize: false,
  //   stripe: false,
  //   border: false,
  //   round: false,
  //   emptyText: '暂无数据',
  //   radioConfig: {
  //     trigger: 'default'
  //   },
  //   checkboxConfig: {
  //     strict: false,
  //     highlight: false,
  //     range: false,
  //     trigger: 'default'
  //   },
    // sortConfig: {
    //   remote: true,
    //   trigger: 'default',
    //   orders: ['asc', 'desc', null],
    //   showIcon:true,
    //   iconAsc:"",//自定义升序的图标
    //   iconDesc:"",//自定义降序的图标
    //   sortMethod: null
    // },
  //   filterConfig: {
  //     remote: false,
  //     filterMethod: null
  //   },
  //   expandConfig: {
  //     trigger: 'default',
  //     showIcon: true
  //   },
  //   treeConfig: {
  //     children: 'children',
  //     hasChild: 'hasChild',
  //     indent: 20,
  //     showIcon: true
  //   },
  //   tooltipConfig: {
  //     theme: 'dark',
  //     enterable: false
  //   },
  //   menuConfig: {
  //     visibleMethod () {}
  //   },
  //   rowId: '_XID', // 行数据的唯一主键字段名
  //   editConfig: {
  //     mode: 'cell',
  //     showAsterisk: true
  //   },
  //   importConfig: {
  //     modes: ['insert', 'covering']
  //   },
  //   exportConfig: {
  //     modes: ['current', 'selected']
  //   },
  //   customConfig: {
  //    storage: false
  //   },
  //   scrollX: {
  //     gt: 60
  //   },
  //   scrollY: {
  //     gt: 100
  //   }
  // },
  // grid: {
  //   size: null,
  //   zoomConfig: {
  //     escRestore: true
  //   },
  //   pagerConfig: {
  //     perfect: false
  //   },
  //   toolbarConfig: {
  //     perfect: false
  //   },
  //   proxyConfig: {
  //     autoLoad: true,
  //     message: true,
  //     props: {
  //       list: null, // 用于列表，读取响应数据
  //       result: 'result', // 用于分页，读取响应数据
  //       total: 'page.total' // 用于分页，读取总条数
  //     }
  //     beforeItem: null,
  //     beforeColumn: null,
  //     beforeQuery: null,
  //     afterQuery: null,
  //     beforeDelete: null,
  //     afterDelete: null,
  //     beforeSave: null,
  //     afterSave: null
  //   }
  // },
  // pager: {
  //   size: null,
  //   autoHidden: false,
  //   perfect: true,
  //   pageSize: 10,
  //   pagerCount: 7,
  //   pageSizes: [10, 15, 20, 50, 100],
  //   layouts: ['PrevJump', 'PrevPage', 'Jump', 'PageCount', 'NextPage', 'NextJump', 'Sizes', 'Total']
  // },
  // form: {
  //   preventSubmit: false
  //   validConfig: {
  //     autoPos: true
  //   },
  //   size: null,
  //   colon: false,
  //   titleAsterisk: true
  // },
  // input: {
  //   size: null,
  //   transfer: false
  //   parseFormat: 'yyyy-MM-dd HH:mm:ss.SSS',
  //   labelFormat: '',
  //   valueFormat: '',
  //   startDay: 1,
  //   digits: 2,
  //   controls: true
  // },
  // textarea: {
  //   size: null
  //   autosize: {
  //     minRows: 1,
  //     maxRows: 10
  //   }
  // },
  // select: {
  //   size: null,
  //   transfer: false,
  //   multiCharOverflow: 8
  // },
  // toolbar: {
  //   size: null,
  //   import: {
  //     mode: 'covering'
  //   },
  //   export: {
  //     types: ['csv', 'html', 'xml', 'txt']
  //   },
  //   custom: {
  //     isFooter: true
  //   },
  //   buttons: [],
  //   tools: []
  // },
  // button: {
  //   size: null,
  //   transfer: false
  // },
  // radio: {
  //   size: null
  // },
  // checkbox: {
  //   size: null
  // },
  // switch: {
  //   size: null
  // },
  // modal: {
  //   // size: null,
  //   minWidth: 340,
  //   minHeight: 200,
  //   lockView: true,
  //   mask: true,
  //   duration: 3000,
  //   marginSize: 0,
  //   dblclickZoom: true,
  //   showTitleOverflow: true
  //   storage: false
  // },
  // list: {
  //   scrollY: {
  //     gt: 100
  //   }
  // }
  // icon: {
  //   // table
  //   TABLE_SORT_ASC: 'vxe-icon--caret-top',
  //   TABLE_SORT_DESC: 'vxe-icon--caret-bottom',
  //   TABLE_FILTER_NONE: 'vxe-icon--funnel',
  //   TABLE_FILTER_MATCH: 'vxe-icon--funnel',
  //   TABLE_EDIT: 'vxe-icon--edit-outline',
  //   TABLE_TREE_LOADED: 'vxe-icon--refresh roll',
  //   TABLE_TREE_OPEN: 'vxe-icon--caret-right rotate90',
  //   TABLE_TREE_CLOSE: 'vxe-icon--caret-right',
  //   TABLE_EXPAND_LOADED: 'vxe-icon--refresh roll',
  //   TABLE_EXPAND_OPEN: 'vxe-icon--arrow-right rotate90',
  //   TABLE_EXPAND_CLOSE: 'vxe-icon--arrow-right',

  //   // button
  //   BUTTON_DROPDOWN: 'vxe-icon--arrow-bottom',
  //   BUTTON_LOADING: 'vxe-icon--refresh roll',

  //   // select
  //   SELECT_OPEN: 'vxe-icon--caret-bottom rotate180',
  //   SELECT_CLOSE: 'vxe-icon--caret-bottom',

  //   // pager
  //   PAGER_JUMP_PREV: 'vxe-icon--d-arrow-left',
  //   PAGER_JUMP_NEXT: 'vxe-icon--d-arrow-right',
  //   PAGER_PREV_PAGE: 'vxe-icon--arrow-left',
  //   PAGER_NEXT_PAGE: 'vxe-icon--arrow-right',
  //   PAGER_JUMP_MORE: 'vxe-icon--more',

  //   // input
  //   INPUT_CLEAR: 'vxe-icon--close',
  //   INPUT_PWD: 'vxe-icon--eye-slash',
  //   INPUT_SHOW_PWD: 'vxe-icon--eye',
  //   INPUT_PREV_NUM: 'vxe-icon--caret-top',
  //   INPUT_NEXT_NUM: 'vxe-icon--caret-bottom',
  //   INPUT_DATE: 'vxe-icon--calendar',
  //   INPUT_SEARCH: 'vxe-icon--search',

  //   // modal
  //   MODAL_ZOOM_IN: 'vxe-icon--square',
  //   MODAL_ZOOM_OUT: 'vxe-icon--zoomout',
  //   MODAL_CLOSE: 'vxe-icon--close',
  //   MODAL_INFO: 'vxe-icon--info',
  //   MODAL_SUCCESS: 'vxe-icon--success',
  //   MODAL_WARNING: 'vxe-icon--warning',
  //   MODAL_ERROR: 'vxe-icon--error',
  //   MODAL_QUESTION: 'vxe-icon--question',
  //   MODAL_LOADING: 'vxe-icon--refresh roll',

  //   // toolbar
  //   TOOLBAR_TOOLS_REFRESH: 'vxe-icon--refresh',
  //   TOOLBAR_TOOLS_REFRESH_LOADING: 'vxe-icon--refresh roll',
  //   TOOLBAR_TOOLS_IMPORT: 'vxe-icon--upload',
  //   TOOLBAR_TOOLS_EXPORT: 'vxe-icon--download',
  //   TOOLBAR_TOOLS_ZOOM_IN: 'vxe-icon--zoomin',
  //   TOOLBAR_TOOLS_ZOOM_OUT: 'vxe-icon--zoomout',
  //   TOOLBAR_TOOLS_CUSTOM: 'vxe-icon--menu',

  //   // form
  //   FORM_PREFIX: 'vxe-icon--info',
  //   FORM_SUFFIX: 'vxe-icon--info',
  //   FORM_FOLDING: 'vxe-icon--arrow-top rotate180',
  //   FORM_UNFOLDING: 'vxe-icon--arrow-top'
  // }
}); 
export default {
  name:"MyTable",
  components: {  },
  props: {
    /**
     * 首次表格是否加载数据
     */
    firstLoad: {
      type: Boolean,
      default() {
        return true;
      },
    },
    /**
     * 服务对象
     */
    server: {
      type: Object,
    },
    /**
     * 定义表格获取数据的方法
     * 表格的数据,数组方式,或者分页对象方式
     * 默认空数组
     * Array[{row},{row}]
     * row:{
     *  title,
     *  value,
     * }
     * Object{
     *  pageSize:10,
     *  totalPage:10,
     *  list:Array[{row},{row}]
     * }
     */
    action: {
      type: [String, Array],
      require: true,
      default() {
        return [];
      },
    },
    /**
     * 表格列
     */
    columns: {
      type: [Array, Function],
      default() {
        return [];
      },
    },
    /**
     * 外部传过来的参数对象
     * 用来做为table的查询条件
     */
    params: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {
     
    };
  },
  beforeCreate() {
    this.toolgerConfig={
        icon: "",
        btnTxt: "",
      },
     this.tableParams={
        page: {
          currentPage: 1,
          pageSize: 10,
        },
        params: this.params,
        sortDTO: {
          fieldName: "",
          orderBy: "",
        },
      }
     this.gridOptions={
        height:500,
        slots: {
          form: "search-bar",
        },
         scrollX:{gt: 20}, 
        scrollY: {
          gt: 10
        },
        resizable: true,
        stripe: true, //斑马纹
        border: "full", //default:默认  | full:完整边框 |outer:外边框|inner:内边框 |none:无边框
        round: false, //圆角边框
        size: "mini", //表格尺寸
        loading: false,
        align: "center", //left center right
        "header-align": "center", //left center right
        "footer-align": "center", //left center right
        "show-header": true, //是否显示表头
        "highlight-current-row": true, //是否高亮显示当前行
        "highlight-hover-row": true, //鼠标移到行是否要高亮显示
        "highlight-current-column": false, //是否高亮显示当前列
        "highlight-hover-column": false, //鼠标移到列是否要高亮显示
        "row-class-name": "", //行附加的 className : string | ((params: { row, rowIndex, $rowIndex }) => any)
        "cell-class-name": "", //给单元格附加的className |string | ((params: { row, rowIndex, $rowIndex, column, columnIndex, $columnIndex }) => any)
        pagerConfig: {
          pageSize: 10,
          pageSizes: [10, 20, 50, 100, 200, 500, 1000],
          total: 0,
          currentPage: 1,
          // "PrevJump", "PrevPage", "Jump", "PageCount", "NextPage", "NextJump",
          layouts: [
            "PrevJump",
            "PrevPage",
            "JumpNumber",
            "NextPage",
            "NextJump",
            "Sizes",
            "Total",
          ],
          border: true,
          slots: {
            left: "pager_left",
          },
        },
         sortConfig: {
          remote: true,
          trigger: 'default',
          orders: ['asc', 'desc', null],
          showIcon:true,
          iconAsc:"",//自定义升序的图标
          iconDesc:"",//自定义降序的图标
          sortMethod: null
        },
        toolbarConfig: {
          // buttons: [],
          // export: true,
          // print: true,
          slots: {
            buttons: "toolbar_buttons",
          },
          zoom: true,
          custom: true,
        },
      }
  },
  created() {
    /* 
         表格初始化
         1.props.firstLoad===false 不加载数据，只初始化，由外部进行调用加载
         2.props.firstLoad === true 加载数据
         3.获取数据加载的方式
            1.action === function 远程调用方法
            2.action === array  直接初始化到表格中 
         */
  },
  beforeMount() {},
  mounted() {
    this.$refs["my-table"].loadColumn(
      this.columns.map((item) => {
        item.field = item.key;
        return item;
      })
    );
    if (this.firstLoad) {
      (!_.isNull(this.action) &&
        _.isString(this.action) &&
        this.fetchFunction()) ||
        (_.isArray(this.action) && this.fetchArray());
    }
    this.$nextTick(() => {
      this.eventTogger();
    });
  },
  computed: {
    /**
     * 设置表格搜索条件的折叠和显示
     */
    // showFormItem() {
    //   console.log('计算表格折叠隐藏');
    //   // 1.计算第一个FormItem 的高度 scrollHeight
    //   // 2.查看整个Form高度 scrollHeight
    //   // 3.如果FormItem的高度 小于scrollHeight  折叠按钮显示
    //   this.$nextTick().then(() => {
    //     const el = this.$refs['my-table'].$el;
    //     let elForm = el.getElementsByClassName('ivu-form')[0];
    //     let formHeight = elForm.scrollHeight; //整个Form高度
    //     let clientHeight = elForm.clientHeight;
    //     let { height: formItemHeight = 0 } = el.getElementsByClassName('ivu-form-item')[0].getBoundingClientRect(); //第一个FormItem 的高度
    //     if (formHeight > formItemHeight) {
    //       //表示有被隐藏的formItem
    //       // 这里根据form的高度进行动画显示搜索框
    //       // elForm.style.transition = "height .5s ease";
    //       if (clientHeight == formHeight) {
    //         // //文案是 收起
    //         // elForm.style.height = formItemHeight + "px";
    //         this.$set(this, 'toolgerConfig', {
    //           icon: "chevron-up",
    //           btnTxt: "收起"
    //         })
    //       } else {
    //         //文案是
    //         this.$set(this, 'toolgerConfig', {
    //           icon: "chevron-down",
    //           btnTxt: "展开"
    //         })
    //       }
    //     } else {
    //       //不显示
    //       return ''
    //     }
    //   })
    // }
  },
  methods: {
    eventPageChange({ type, currentPage, pageSize, $event }) {
      console.log(type, currentPage, pageSize, $event);
      // this.tableParams.page.currentPage = currentPage;
      // this.tableParams.page.pageSize = pageSize;
      this.load(null, currentPage, pageSize);
    },
    eventTogger() { 
      // if (!this.$refs['my-table']) return;
      const el = this.$refs["my-table"].$el;
      const elFI = el.getElementsByClassName("ivu-form-item");
      if (elFI.length <= 0) return;
      //第一个FormItem 的高度
      let { height: formItemHeight = 0 } = elFI[0].getBoundingClientRect();
      let elForm = el.getElementsByClassName("ivu-form")[0];
      //整个Form高度
      let formHeight = elForm.scrollHeight;
      //Form 区域可见高度
      let clientHeight = elForm.clientHeight;
      /**
       * 1.判断是多行还是一行
       *    只有一行：条件是scrollHeight == formItenHeight
       *
       * 1. 如果有很多个Item 判断Item 是否超过了两行 ，超过了则保留一行显示
       * 2.
       */
      if (formItemHeight != formHeight) {
        //表示有被隐藏的formItem
        // 这里根据form的高度进行动画显示搜索框
        elForm.style.transition = "height .2s ease";
        if (clientHeight == formHeight) {
          //文案是 收起
          elForm.style.height = formItemHeight + "px";
          this.$set(this, "toolgerConfig", {
            icon: "chevron-down",
            btnTxt: "展开",
          });
        } else {
          this.$set(this, "toolgerConfig", {
            icon: "chevron-up",
            btnTxt: "收起",
          });
          elForm.style.height = formHeight + "px";
        }
      } else {
        this.$set(this, "toolgerConfig", {
          icon: "",
          btnTxt: "",
        });
      }
    },
    /**
     * public Load API
     * @param param  搜索条件参数
     *
     */
    load(formParam = null, page, pageSize, allParam, cb = function () {}) {
      this.gridOptions.loading = true;
      formParam && (this.tableParams.params = extend(true, {}, formParam));
      if (page) {
        this.tableParams.page.currentPage = page;
        this.gridOptions.pagerConfig.currentPage = page;
      }
      if (pageSize) {
        this.tableParams.page.pageSize = pageSize;
        this.gridOptions.pagerConfig.pageSize = pageSize;
      }
      allParam && (this.tableParams = extend(true, {}, allParam));

      (!_.isNull(this.action) &&
        _.isString(this.action) &&
        this.fetchFunction(cb)) ||
        (_.isArray(this.action) && this.fetchArray());
    },
    fetchFunction(cb) {
    
      return this.server[this.action](this.tableParams)
        .then((res) => {
            console.log('fetchuFunction');
          try {
            // let mokeRes = {
            //   "total": 12134,
            //   "list": [
            //     {
            //       "cityId": 1,
            //       "cityName": "北京",
            //       "cityFirstName": "B",
            //       "cityAbbreviation": "BJ",
            //       "cityType": "1",
            //       "areaType": "1",
            //       "isHot": "1",
            //       "fullCityName": "BEIJING",
            //       "province": "北京",
            //       "isHotDisplay": "是",
            //       "cityTypeDisplay": "一线城市",
            //       "cityLangDtos": null
            //     }
            //   ],
            //   "pageNum": 1,
            //   "pageSize": 10,
            //   "size": 10,
            //   "startRow": 1,
            //   "endRow": 10,
            //   "pages": 1214,
            //   "prePage": 0,
            //   "nextPage": 2,
            //   "isFirstPage": true,
            //   "isLastPage": false,
            //   "hasPreviousPage": false,
            //   "hasNextPage": true,
            //   "navigatePages": 8,
            //   "navigatepageNums": [1, 2, 3, 4, 5, 6, 7, 8],
            //   "navigateFirstPage": 1,
            //   "navigateLastPage": 8,
            //   "firstPage": 1,
            //   "lastPage": 8
            // }
            let { data: { list = [], pageNum, total = 0 } = {} } = res;
            this.gridOptions.pagerConfig.total = total;
            this.gridOptions.pagerConfig.currentPage = pageNum;
            this.$refs["my-table"].loadData(list);
            cb && cb(list);
            this.gridOptions.loading = false;
          } catch (error) {
            throw new Error(error.message);
          }
          // if (!res || !res.data || res.statusCode === '-1') {
          //   let { msg = "", message = "" } = res;
          //   throw new Error(msg || message || "数据加载失败,请稍后再试")
          // }
        })
        .catch((error) => {
          this.$Message.error(error.message);
        });
    },
    fetchArray() {
      return this.$refs["my-table"].loadData(this.action);
    },
  },
};
</script>

<style lang="scss">
div.mains .mains-wrap {
  z-index: 10;
}
.my-table {
  border-top: 2px solid #ffa329;
  height:100vh;
  .vxe-grid--form-wrapper {
    .ivu-form-inline {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
      padding: 0px 8px 8px 8px;
      overflow: hidden;
    }
  }
  .vxe-grid--toolbar-wrapper {
    padding: 0px 8px;
    .vxe-button--wrapper {
      display: flex;
      button.ivu-btn {
        margin-right: 8px;
      }
    }
  }
  .vxe-pager--wrapper {
    .vxe-pager--left-wrapper {
      .page-left {
        position: absolute;
        left: 8px;
        top: 50%;
        transform: translateY(-50%);
        z-index: 10;
      }
    }
  }
  .vxe-grid {
    .vxe-table {
      .vxe-table--body {
        .vxe-body--column {
          .vxe-cell {
            .ivu-btn {
              padding: 0px 4px;
            }
          }
        }
      }
    }
  }
}
</style>